<template>
  <el-card>
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="basicInfo">
        
        <!-- <el-form ref="form" :model="form" :rules="rules" label-width="150px"> -->
            <el-row>
                <el-col>
                    <el-card id="baseInfoCard">
                        <div slot="header"><span><i class="el-icon-s-tools"></i> 基本信息</span></div>
                        <el-col :span="12">
                            <el-form-item label="代理名称" prop="proxyName">
                                <el-input v-model="form.proxyName" placeholder="请输入代理名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="cluster.mode=='MM'">
                            <el-form-item label="绑定设备" prop="bindDevice">
                              <el-select v-model="form.bindDevice" placeholder="请选择绑定设备">
                                <el-option
                                  v-for="dict in dict.type.device_type2"
                                  :key="dict.value"
                                  :label="dict.label"
                                  :value="dict.value"
                                ></el-option>
                              </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="bindIp">
                                <span slot="label">
                                  绑定地址
                                  <el-tooltip placement="right" effect="light">
                                    <div slot="content">绑定地址需要防火墙允许通过</div>
                                    <i class="el-icon-question"></i>
                                  </el-tooltip>
                                </span>
                                <el-input v-model="form.bindIp" :maxlength="40" placeholder="请输入绑定地址" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="绑定端口" prop="bindPort">
                                <el-input v-model.number="form.bindPort" :maxlength="5" placeholder="请输入绑定端口" />
                            </el-form-item>

                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="模式" prop="mode">
                                <el-select v-model="form.mode" placeholder="请选择模式">
                                    <el-option
                                    v-for="dict in dict.type.proxy_mode"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="最大连接" prop="maxconn">
                                <el-input v-model.number="form.maxconn" :maxlength="6" placeholder="请输入最大连接" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="健康检测方式" prop="healthCheck">
                                <el-select v-model="form.healthCheck" placeholder="请选择健康检测方式">
                                    <el-option
                                    v-for="dict in dict.type.proxy_health_check"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="form.healthCheck == 'httpservice'">
                            <el-form-item label="检测方法" prop="checkMethodId">
                              <el-select v-model="form.checkMethodId" no-data-text="不配置" placeholder="请选择健康检测方法">
                                <!-- <el-option
                                v-for="methodOption in checkMethodOptions"
                                :key="methodOption.value"
                                :label="methodOption.label"
                                :value="methodOption.value"
                                ></el-option> -->

                                <el-option-group key="g0" label="默认">
                                  <el-option key='0' label="标准" :value='0'></el-option>
                                </el-option-group>
                                <el-option-group key="g1" label="自定义">
                                  <el-option
                                    v-for="methodOption in checkMethodOptions"
                                    :key="methodOption.value"
                                    :label="methodOption.label"
                                    :value="methodOption.value"
                                    ></el-option>
                                </el-option-group>

                              </el-select>

                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <el-form-item label="备注" prop="remark">
                                <el-input v-model="form.remark" type="textarea" :rows="3"></el-input>
                            </el-form-item>
                        </el-col>
                            
                    </el-card>
                </el-col>
            </el-row>
            
            <el-row>
              <el-col>
                <el-card id="balanceCard">
                    <div slot="header"><span><i class="el-icon-s-tools"></i> 调度算法</span></div>

                    <el-col :span="12">
                        <el-form-item label="调度算法" prop="balance">
                            <el-select v-model="form.balance" placeholder="请选择调度算法">
                                <el-option
                                v-for="dict in dict.type.proxy_balance"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="URI范围" prop="balanceArgsDisplay.uriParamType" :rules="rules.uriParamType" v-if="form.balance == 'uri'">
                            <el-select v-model="form.balanceArgsDisplay.uriParamType" placeholder="请选择URI范围">
                                <el-option
                                v-for="option in uriParamTypeOptions"
                                :key="option.value"
                                :label="option.label"
                                :value="option.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="最大长度" prop="balanceArgsDisplay.uriLen" :rules="rules.uriLen" v-if="form.balance == 'uri' && form.balanceArgsDisplay.uriParamType == 'left'">
                            <el-input v-model.number="form.balanceArgsDisplay.uriLen" :maxlength="3" placeholder="请输入最大长度" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="最大深度" prop="balanceArgsDisplay.uriDepth" :rules="rules.uriDepth" v-if="form.balance == 'uri' && form.balanceArgsDisplay.uriParamType == 'left'">
                            <el-input v-model.number="form.balanceArgsDisplay.uriDepth" :maxlength="1" placeholder="请输入最大深度" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="参数名称" prop="balanceArgsDisplay.urlParam" :rules="rules.urlParam" v-if="form.balance == 'url_param'">
                           <el-autocomplete
                              class="inline-input"
                              v-model="form.balanceArgsDisplay.urlParam"
                              :fetch-suggestions="urlParamSearch"
                              placeholder="请输入参数名称"
                            ></el-autocomplete>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="HTTP头名称" prop="balanceArgsDisplay.hdrName" :rules="rules.urlParam" v-if="form.balance == 'hdr'">
                           <el-select v-model="form.balanceArgsDisplay.hdrName" placeholder="请选择HTTP头">
                                <el-option
                                v-for="option in hdrNameOptions"
                                :key="option.value"
                                :label="option.label"
                                :value="option.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>


                </el-card>
              </el-col>
            </el-row>
            
            <el-row>
              <el-col>
                <el-card id="sessionPersistenceCard">
                    <div slot="header">
                    <span><i class="el-icon-s-tools"></i> 会话保持</span>
                      <el-tooltip placement="right" effect="light">
                        <div slot="content">会话保持可将相同特征的会话请求调度到同一服务器<br>1.Cookie方式仅可在HTTP模式下使用<br>
                        2.Cookie方式与粘贴表同时启用时，Cookie方式会优先参与调度决策<br>3.调度算法"源IP Hash"本身具有会话保持功能，可不必选择。</div>
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </div>

                    <el-row>
                      <el-col :span="3">
                          <el-form-item label="Cookie" prop="cookie">
                              <el-switch v-model="form.cookie" active-value="1" inactive-value="0" ></el-switch>
                          </el-form-item>
                      </el-col>
                      <el-col :span="3">
                          <el-form-item label="粘贴表" prop="stickTable">
                              <el-switch v-model="form.stickTable" active-value="1" inactive-value="0" ></el-switch>
                          </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row v-if="form.cookie == 1">
                      <!-- cookie SRV insert nocache httponly secure maxidle 30m maxlife 8h -->
                      <el-col :span="8">
                          <el-form-item label="CookieName" label-width="120px" prop="cookieConfigDisplay.cookieName" :rules="rules.cookieName">
                            <el-input v-model="form.cookieConfigDisplay.cookieName" :maxlength="20" size="mini" placeholder="请输入CookieName" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="3">
                          <el-form-item label="Nocache" label-width="80px" prop="cookieConfigDisplay.nocache">
                              <el-switch v-model="form.cookieConfigDisplay.nocache" 
                              active-value="1" inactive-value="0" :width="30"></el-switch>
                          </el-form-item>
                      </el-col>
                      <el-col :span="3">
                          <el-form-item label="Httponly" label-width="80px" prop="cookieConfigDisplay.httponly">
                              <el-switch v-model="form.cookieConfigDisplay.httponly" 
                              active-value="1" inactive-value="0" :width="30"></el-switch>
                          </el-form-item>
                      </el-col>
                      <el-col :span="3">
                          <el-form-item label="Secure" label-width="80px" prop="cookieConfigDisplay.secure">
                              <el-switch v-model="form.cookieConfigDisplay.secure" 
                              active-value="1" inactive-value="0" :width="30"></el-switch>
                          </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row v-if="form.cookie == 1">
                      <el-col :span="6">
                          <el-form-item label="最大空闲时间" label-width="120px" :rules="rules.maxidle" prop="cookieConfigDisplay.maxidle">
                            <el-input v-model.number="form.cookieConfigDisplay.maxidle" :maxlength="4" size="mini" placeholder="请输入最大空闲时间" >
                              <template slot="append">分钟</template>
                            </el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="6">
                          <el-form-item label="最大存续时间" label-width="120px" :rules="rules.maxlife" prop="cookieConfigDisplay.maxlife">
                            <el-input v-model.number="form.cookieConfigDisplay.maxlife" :maxlength="4" size="mini" placeholder="请输入最大存续时间" >
                              <template slot="append">分钟</template>
                            </el-input>
                          </el-form-item>
                      </el-col>
                    </el-row>


                </el-card>
              </el-col>
            </el-row>
            
            <el-row>
              <el-col>
                <el-card id="ssloffloadingCard">
                    <div slot="header"><span><i class="el-icon-s-tools"></i> SSL Offloading</span></div>
                    <el-row>
                      <el-col :span="6">
                          <el-form-item label="SslOffLoading" prop="sslOffloading">
                              <el-switch v-model="form.sslOffloading" active-value="1" inactive-value="0" ></el-switch>
                          </el-form-item>
                      </el-col>
                      <el-col :span="6" v-if="form.sslOffloading == 1">
                          <el-form-item label="代理证书" prop="proxyCrtId" label-width="80px">
                              <el-select v-model="form.proxyCrtId" placeholder="请选择代理证书">
                                <el-option
                                v-for="item in proxyCrtOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                ></el-option>
                              </el-select>
                          </el-form-item>
                      </el-col>
                      <el-col :span="6" v-if="form.sslOffloading == 1">
                          <el-form-item label="Http->Https" prop="http2https">
                              <el-switch v-model="form.http2https" active-value="1" inactive-value="0" ></el-switch>
                          </el-form-item>
                      </el-col>
                    </el-row>
                    
                    <el-row>
                      <el-col :span="6" v-if="form.sslOffloading == 1">
                          <el-form-item label="TLS最低版本" prop="sslMinVer" label-width="120px">
                              <el-select v-model="form.sslMinVer" placeholder="请选择TLS版本">
                                <el-option
                                v-for="item in sslVerOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                ></el-option>
                              </el-select>
                          </el-form-item>
                      </el-col>
                      <el-col :span="6" v-if="form.sslOffloading == 1">
                          <el-form-item label="TLS最高版本" prop="sslMaxVer" label-width="120px">
                              <el-select v-model="form.sslMaxVer" placeholder="请选择TLS版本">
                                <el-option
                                v-for="item in sslVerOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                ></el-option>
                              </el-select>
                          </el-form-item>
                      </el-col>
                    </el-row>

                </el-card>
              </el-col>
            </el-row>
            
            <el-row>
                <el-col>
                    <el-card id="optionCard">
                        <div slot="header"><span><i class="el-icon-s-tools"></i> Options</span></div>
                        <el-row>
                          <el-col :span="6">
                              <el-form-item label="Forwardfor" prop="forwardfor">
                                  <el-switch v-model="form.forwardfor" active-value="1" inactive-value="0" ></el-switch>
                              </el-form-item>
                          </el-col>
                          <el-col :span="6">
                              <el-form-item label="Redispatch" prop="redispatch">
                                  <el-switch v-model="form.redispatch" active-value="1" inactive-value="0" ></el-switch>
                              </el-form-item>
                          </el-col>
                          
                        </el-row>

                    </el-card>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-card id="serversCard">
                        <div slot="header"><span><i class="el-icon-s-tools"></i> Servers</span>{{form.proxyName == undefined?"  服务器群：[]":"  服务器群：["+form.proxyName+"]"}}</div>
                        
                        <el-row :gutter="10" class="mb8">
                          <el-col :span="1.5">
                            <el-button
                              type="primary"
                              plain
                              icon="el-icon-plus"
                              size="mini"
                              @click="handleServerEdit"
                            >编辑</el-button>
                          </el-col>
                        </el-row>
                          <el-table :data="form.frontProxyServerList">
                            <!-- <el-table-column label="标识ID" align="center" width="60px" prop="serverId" /> -->
                            <el-table-column label="服务器名称" align="center" prop="serverName" />
                            <el-table-column label="IP地址" align="center" width="220px" prop="serverIp" />
                            <el-table-column label="服务端口" align="center" width="100px" prop="servicePort" >
                              <template slot-scope="scope">
                                <el-form-item label-width="0px" :prop="'frontProxyServerList.'+scope.$index+'.servicePort'" :rules="rules.servicePort">
                                  <el-input v-model.number="scope.row.servicePort" size="mini" maxlength="5" :min="1" :max="65535" @change="displayServerCrt()"/>
                                </el-form-item>
                              </template>
                            </el-table-column>
                            <el-table-column label="检测端口" align="center" width="100px" prop="checkPort" >
                              <template slot-scope="scope">
                                <!-- <el-input v-model="scope.row.checkPort" placeholder="检测端口" /> -->
                                <!-- <el-input-number v-model="scope.row.checkPort" size="mini" controls-position="right" :min="1" :max="65535"/> -->
                                <el-form-item label-width="0px" :prop="'frontProxyServerList.'+scope.$index+'.checkPort'" :rules="rules.checkPort">
                                  <el-input v-model.number="scope.row.checkPort" size="mini" maxlength="5" min="1" max="65535"/>
                                </el-form-item>
                              </template>
                            </el-table-column>
                            <el-table-column label="权重" align="center" width="80px" prop="weight" >
                              <template slot-scope="scope">
                                <!-- <el-input v-model="scope.row.weight" placeholder="权重" /> -->
                                <!-- <el-input-number v-model="scope.row.weight" size="mini" controls-position="right" :min="1" :max="10"/> -->
                                <el-form-item label-width="0px" :prop="'frontProxyServerList.'+scope.$index+'.weight'" :rules="rules.weight">
                                  <el-input v-model.number="scope.row.weight" size="mini" :maxlength="2" :min="1" :max="10"/>
                                </el-form-item>
                              </template>
                            </el-table-column>
                            <el-table-column label="Inter" align="center" width="80px" prop="inter" >
                              <template slot-scope="scope">
                                <el-select v-model="scope.row.inter" size="mini" placeholder="Inter">
                                  <el-option
                                  v-for="item in serverInterOptions"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                  ></el-option>
                                </el-select>
                              </template>
                            </el-table-column>
                            <el-table-column label="Rise" align="center" width="70px" prop="rise" >
                              <template slot-scope="scope">
                                <el-select v-model="scope.row.rise" size="mini" placeholder="Rise">
                                  <el-option
                                  v-for="item in serverRiseOptions"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                  ></el-option>
                                </el-select>
                              </template>
                            </el-table-column>
                            <el-table-column label="Fall" align="center" width="70px" prop="fall" >
                              <template slot-scope="scope">
                                <el-select v-model="scope.row.fall" size="mini" placeholder="Fall">
                                  <el-option
                                  v-for="item in serverFallOptions"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                  ></el-option>
                                </el-select>
                              </template>
                            </el-table-column>
                            <el-table-column label="Maxconn" align="center" width="80px" prop="maxconn" >
                              <template slot-scope="scope">
                                <el-input v-model.number="scope.row.maxconn" size="mini" :maxlength="5" placeholder="Maxconn" />
                              </template>
                            </el-table-column>
                            <el-table-column label="证书" align="center" prop="serverCrtName" />

                          </el-table>

                    </el-card>
                </el-col>
            </el-row>
        <!-- </el-form> -->

        <!-- 添加或修改服务器对话框 -->
        <el-dialog title="修改服务器" :visible.sync="transferOpen" width="700px" append-to-body>
          <template>
            <el-transfer v-model="transferValue" :data="transferSource"
              :titles="['可选服务器', '已选服务器']"
              @change="handleTransferChange">
              
            </el-transfer>
          </template>
        </el-dialog>
        
      </el-tab-pane>

      <el-tab-pane label="高级配置" name="advanceInfo">
        
            <el-row>
                <el-col>
                    <el-card id="aclsCard">
                        <div slot="header"><span><i class="el-icon-s-tools"></i> ACL</span></div>
                        
                        <el-row :gutter="10" class="mb8">
                          <el-col :span="1.5">
                            <el-button
                              type="primary"
                              plain
                              icon="el-icon-plus"
                              size="mini"
                              @click="handleAclAdd"
                              :disabled = "form.frontProxyAclList.length == 10"
                            >新增</el-button>
                          </el-col>
                          <el-col :span="5">
                            <el-alert title="最大数量为10" type="warning" :closable="false" show-icon></el-alert>
                          </el-col>
                        </el-row>
                        <el-table :data="form.frontProxyAclList">
                          <el-table-column type="index" width="40px">
                          </el-table-column>

                          <el-table-column label="IF" align="center" width="220px" prop="aclIf" >
                              <template slot-scope="scope">
                                <el-form-item label-width="30px" label="IF" >
                                  <el-select v-model="scope.row.aclIf" size="mini">
                                      <el-option
                                      v-for="dict in dict.type.proxy_acl_if"
                                      :key="dict.value"
                                      :label="dict.label"
                                      :value="dict.value"
                                      ></el-option>
                                  </el-select>
                                </el-form-item>
                              </template>
                          </el-table-column>

                          <el-table-column label="IfValue" align="center" width="240px" prop="aclIfValue" >
                              <template slot-scope="scope">
                                <el-form-item label-width="60px" label="value" :prop="'frontProxyAclList.'+scope.$index+'.aclIfValue'" :rules="rules.aclIfValue" v-if="scope.row.aclIf != 'srcip'">
                                  <el-input v-model="scope.row.aclIfValue" size="mini" maxlength="20"/>
                                </el-form-item>
                                <el-form-item label-width="60px" label="value" :prop="'frontProxyAclList.'+scope.$index+'.aclIfValue'" :rules="rules.aclIfValue2" v-if="scope.row.aclIf == 'srcip'">
                                  <el-input v-model="scope.row.aclIfValue" size="mini" maxlength="15"/>
                                </el-form-item>
                              </template>
                          </el-table-column>

                          <el-table-column label="Then" align="center" width="190px" prop="aclThen" >
                              <template slot-scope="scope">
                                <el-form-item label-width="60px" label="then" >
                                  <el-select v-model="scope.row.aclThen" size="mini"
                                      @change="alcThenChange(scope.row)">
                                      <el-option
                                      v-for="dict in dict.type.proxy_acl_then"
                                      :key="dict.value"
                                      :label="dict.label"
                                      :value="dict.value"
                                      ></el-option>
                                  </el-select>
                                </el-form-item>
                              </template>
                          </el-table-column>

                          <el-table-column label="ThenValue" align="center" prop="aclThenValue" >
                              <template slot-scope="scope">
                                <!-- <el-form-item label-width="60px" label="value" v-if="scope.row.aclThen == 'deny' || scope.row.aclThen == 'allow'">
                                  <el-input v-model="scope.row.aclThenValue" size="mini" maxlength="100" disabled/>
                                </el-form-item> -->
                                <el-form-item label-width="60px" label="value" :prop="'frontProxyAclList.'+scope.$index+'.aclThenValue'" :rules="rules.aclThenValue" v-if="scope.row.aclThen != 'deny' && scope.row.aclThen != 'allow'">
                                  <el-input v-model="scope.row.aclThenValue" size="mini" maxlength="100"/>
                                </el-form-item>
                              </template>
                          </el-table-column>

                          <el-table-column label="操作" align="center" width="70px" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                              <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleAclDelete(scope.$index)"
                                v-hasPermi="['lbconfig:frontproxy:remove']"
                              >删除</el-button>
                            </template>
                          </el-table-column>

                        </el-table>
                    </el-card>
                </el-col>

            </el-row>

            <el-row>
                <el-col>
                    <el-card id="headersCard">
                        <div slot="header"><span><i class="el-icon-s-tools"></i> Header</span></div>
                        
                        <el-row :gutter="10" class="mb8">
                          <el-col :span="1.5">
                            <el-button
                              type="primary"
                              plain
                              icon="el-icon-plus"
                              size="mini"
                              @click="handleHeaderAdd"
                              :disabled = "form.frontProxyHeaderList.length == 10"
                            >新增</el-button>
                          </el-col>
                          <el-col :span="5">
                            <el-alert title="最大数量为10" type="warning" :closable="false" show-icon></el-alert>
                          </el-col>
                        </el-row>
                        <el-table :data="form.frontProxyHeaderList">
                          <el-table-column type="index" width="40px">
                          </el-table-column>

                          <el-table-column label="Action" align="center" width="220px" prop="headerAction" >
                              <template slot-scope="scope">
                                <el-form-item label-width="0px" >
                                  <el-select v-model="scope.row.headerAction" size="mini">
                                      <el-option
                                      v-for="dict in dict.type.proxy_header_action"
                                      :key="dict.value"
                                      :label="dict.label"
                                      :value="dict.value"
                                      ></el-option>
                                  </el-select>
                                </el-form-item>
                              </template>
                          </el-table-column>

                          <el-table-column label="Method" align="center" width="190px" prop="headerMethod" >
                              <template slot-scope="scope">
                                <el-form-item label-width="0px" >
                                  <el-select v-model="scope.row.headerMethod" size="mini"
                                      @change="headerMethodChange(scope.row)">
                                      <el-option
                                      v-for="dict in dict.type.proxy_header_method"
                                      :key="dict.value"
                                      :label="dict.label"
                                      :value="dict.value"
                                      ></el-option>
                                  </el-select>
                                </el-form-item>
                              </template>
                          </el-table-column>

                          <el-table-column label="Name" align="center" width="240px" prop="headerName" >
                              <template slot-scope="scope">
                                <el-form-item label-width="60px" label="name" :prop="'frontProxyHeaderList.'+scope.$index+'.headerName'" :rules="rules.headerName">
                                  <el-input v-model="scope.row.headerName" size="mini" maxlength="20"/>
                                </el-form-item>
                              </template>
                          </el-table-column>

                          <el-table-column label="Value" align="center" prop="headerValue" >
                              <template slot-scope="scope">
                                <!-- <el-form-item label-width="60px" label="value" v-if="scope.row.aclThen == 'deny' || scope.row.aclThen == 'allow'">
                                  <el-input v-model="scope.row.aclThenValue" size="mini" maxlength="100" disabled/>
                                </el-form-item> -->
                                <el-form-item label-width="60px" label="value" :prop="'frontProxyHeaderList.'+scope.$index+'.headerValue'" :rules="rules.headerValue" v-if="scope.row.headerMethod != 'delheader'">
                                  <el-input v-model="scope.row.headerValue" size="mini" maxlength="100"/>
                                </el-form-item>
                              </template>
                          </el-table-column>

                          <el-table-column label="操作" align="center" width="70px" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                              <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleHeaderDelete(scope.$index)"
                                v-hasPermi="['lbconfig:frontproxy:remove']"
                              >删除</el-button>
                            </template>
                          </el-table-column>

                        </el-table>
                    </el-card>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-card id="accelerateCard">
                        <div slot="header"><span><i class="el-icon-s-tools"></i> WEB加速</span></div>
                        <el-col :span="6">
                            <el-form-item label-width="120px" label="数据压缩" prop="compression">
                                <el-switch v-model="form.compression" active-value="1" inactive-value="0" ></el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label-width="120px" label="数据缓存" prop="cache">
                                <el-switch v-model="form.cache" active-value="1" inactive-value="0" ></el-switch>
                            </el-form-item>
                        </el-col>
                    </el-card>
                </el-col>
            </el-row>

            <el-row>
              <el-col>
                <el-card id="httpAuthCard">
                    <div slot="header">
                      <span><i class="el-icon-s-tools"></i> Http Basic Auth</span>
                      <el-tooltip placement="right" effect="light">
                        <div slot="content">仅支持Http Basic Authentication<br></div>
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </div>

                    <el-row>
                      <el-col :span="6">
                          <el-form-item label="Httpauth" prop="httpauth">
                              <el-switch v-model="form.httpauth" active-value="1" inactive-value="0" ></el-switch>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12" v-if="form.httpauth == 1">
                          <el-form-item prop="httpauthPath">
                            <span slot="label">
                              认证路径
                              <el-tooltip placement="right" effect="light">
                                <div slot="content">前缀匹配的路径需要进行认证<br>1.支持多个路径，多个路径间用“，”分开<br>2.单个路径以“/”开始</div>
                                <i class="el-icon-question"></i>
                              </el-tooltip>
                            </span>
                            <el-input v-model="form.httpauthPath" maxlength="120" placeholder="请输入路径" />
                          </el-form-item>
                      </el-col>
                    </el-row>
                    
                    <el-row>
                      <el-col :span="6" v-if="form.httpauth == 1">
                          <el-form-item label="用户名" prop="httpauthUsername">
                            <el-input v-model="form.httpauthUsername" maxlength="20" placeholder="请输入用户名" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="6" v-if="form.httpauth == 1">
                          <el-form-item label="密码" prop="httpauthPasswd">
                            <el-input v-model="form.httpauthPasswd" maxlength="20" placeholder="请输入密码" />
                          </el-form-item>
                      </el-col>
                    </el-row>
                    
                </el-card>
              </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-card id="secureCard">
                        <div slot="header"><span><i class="el-icon-s-tools"></i> 安全防护</span></div>

                        <el-col :span="6">
                            <el-form-item label-width="120px" label="慢攻击防护" prop="showAttack">
                                <el-switch v-model="form.showAttack" active-value="1" inactive-value="0" ></el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label-width="120px" label="DDos防护" prop="ddos">
                                <el-switch v-model="form.ddos" active-value="1" inactive-value="0" ></el-switch>
                            </el-form-item>
                        </el-col>
                        <!--el-col :span="6">
                            <el-form-item label-width="120px" label="WAF防护" prop="waf">
                                <el-switch v-model="form.waf" active-value="1" inactive-value="0" ></el-switch>
                            </el-form-item>
                        </el-col-->
                        <el-col :span="6">
                            <el-form-item label-width="120px" label="机器人攻击防护" prop="antibot">
                                <el-switch v-model="form.antibot" active-value="1" inactive-value="0" ></el-switch>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="白名单文件列表" prop="whitelist">
                            <!-- <el-input v-model="form.whitelist" placeholder="请输入白名单文件标识ID" /> -->
                              <el-select v-model="form.whitelist" no-data-text="不配置" size="mini" placeholder="whitelist">
                                <el-option
                                v-for="whiteOption in whiteListOptions"
                                :key="whiteOption.value"
                                :label="whiteOption.label"
                                :value="whiteOption.value"
                                ></el-option>
                              </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="黑名单文件列表" prop="blacklist">
                            <!-- <el-input v-model="form.blacklist" placeholder="请输入黑名单文件标识ID" /> -->
                              <el-select v-model="form.blacklist" no-data-text="不配置" size="mini" placeholder="blacklist">
                                <el-option
                                v-for="blackOption in blackListOptions"
                                :key="blackOption.value"
                                :label="blackOption.label"
                                :value="blackOption.value"
                                ></el-option>
                              </el-select>
                            </el-form-item>
                        </el-col>
                    </el-card>
                </el-col>
            </el-row>
        <!-- </el-form> -->

      </el-tab-pane>

    </el-tabs>
        </el-form>

    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>

  </el-card>
</template>

<script>
import { getFrontproxy, addFrontproxy, updateFrontproxy, getServerMap, getProxyCrtMap, getServerCrtMap, getBlackwhiteListMap, getCheckMethodMap, getCluster} from "@/api/lbconfig/frontproxy";
import { isIPv4, isIP } from "@/api/snowfieldValidate";


export default {
  name: "FrontProxyEdit",
  dicts: ['proxy_mode', 'proxy_health_check', 'proxy_balance', 'proxy_acl_if', 'proxy_acl_then', 'proxy_header_action', 'proxy_header_method', 'device_type2'],
  components: {
    // basicInfoForm,
    // genInfoForm
  },
  data() {
    return {
      // 选中选项卡的 name
      activeName: "basicInfo",
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + "px",
      // 表信息
      tables: [],
      // 表列信息
      columns: [],
      // 字典信息
      dictOptions: [],
      // 菜单信息
      menus: [],
      // 表单参数
      form: {
        frontProxyServerList:[],
        frontProxyAclList:[],
        frontProxyHeaderList:[],
      },
      // 表单校验
      rules: {
        proxyName: [
          { required: true, message: "代理名称不能为空", trigger: "blur" }
        ],
        bindDevice: [
          { required: true, message: "绑定设备不能为空", trigger: "change" }
        ],
        bindIp: [
          { required: true, message: "绑定地址不能为空", trigger: "blur" },
          { validator:(rule,value,callback)=>{
            if(!isIP(value)){
              callback(new Error("IP地址格式有误"));
              return;
            }

            callback();
          }, message: "IP地址格式有误", trigger: 'blur'},
        ],
        bindPort: [
          { required: true, message: "绑定端口不能为空", trigger: "blur" },
          { type: 'integer', min: 1, max:65535, message: '范围[1,65535],其中8080禁用', trigger: 'blur' },
          { validator:(rule,value,callback)=>{
            if(value == '8080'){
              callback(new Error("范围[1,65535],其中8080禁用"));
              return;
            }

            callback();
          }, message: "范围[1,65535],其中8080禁用", trigger: 'blur'},
        ],
        mode: [
          { required: true, message: "模式不能为空", trigger: "change" }
        ],
        maxconn: [
          { required: true, message: "最大连接不能为空", trigger: "blur" },
          { type: 'integer', min: 1000, max:999999, message: '范围[1000,999999]', trigger: 'blur' }
        ],
        balance: [
          { required: true, message: "调度算法不能为空", trigger: "change" }
        ],
        uriParamType: [
          { required: true, message: "URI范围不能为空", trigger: "change" }
        ],
        uriLen: [
          { required: true, message: "最大长度不能为空", trigger: "blur" },
          { type: 'integer', min: 2, max:127, message: '范围[2,127]', trigger: 'blur' }
        ],
        uriDepth: [
          { required: true, message: "最大深度不能为空", trigger: "blur" },
          { type: 'integer', min: 3, max:8, message: '范围[3,8]', trigger: 'blur' }
        ],
        urlParam: [
          { required: true, message: "URL参数名称不能为空", trigger: "blur" },
          { required: true, message: "URL参数名称不能为空", trigger: "change" }
        ],
        healthCheck: [
          { required: true, message: "健康检测方式不能为空", trigger: "change" }
        ],
        checkMethodId: [
          { required: true, message: "检测方法不能为空", trigger: "change" }
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "change" }
        ],
        cookieName: [
          { required: true, message: "名称不能为空", trigger: "blur" }
        ],
        maxidle: [
          { required: true, message: "不能为空,整数,范围[1,1440]", trigger: "blur" },
          { type: 'integer', min: 1, max:1440, message: '整数,范围[1,1440]', trigger: 'blur' }
        ],
        maxlife: [
          { required: true, message: "不能为空,整数,范围[1,1440]", trigger: "blur" },
          { type: 'integer', min: 1, max:1440, message: '整数,范围[1,1440]', trigger: 'blur' }
        ],
        proxyCrtId: [
          { required: true, message: "代理证书不能为空", trigger: "change" }
        ],
        sslMinVer: [
          { required: true, message: "最小版本不能为空", trigger: "change" }
        ],
        sslMaxVer: [
          { required: true, message: "最大版本不能为空", trigger: "change" }
        ],
        httpauthPath: [
          { required: true, message: "路径不能为空", trigger: "blur" }
        ],
        httpauthUsername: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        httpauthPasswd: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
        whitelist: [
          { required: true, message: "白名单列表不能为空", trigger: "change" }
        ],
        blacklist: [
          { required: true, message: "黑名单列表不能为空", trigger: "change" }
        ],
        servicePort: [
          { required: true, message: "端口不能为空", trigger: "blur" },
          { type: 'integer', min: 1, max:65535, message: '范围[1,65535]', trigger: 'blur' }
        ],
        checkPort: [
          { required: true, message: "端口不能为空", trigger: "blur" },
          { type: 'integer', min: 1, max:65535, message: '范围[1,65535]', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: "权重不能为空", trigger: "blur" },
          { type: 'integer', min: 1, max:10, message: '范围[1,10]', trigger: 'blur' }
        ],
        aclIfValue: [
          { required: true, message: "值不能为空", trigger: "blur" }
        ],
        aclIfValue2: [
          { required: true, message: "值不能为空", trigger: "blur" },
          { validator:(rule,value,callback)=>{
            if(!isIP(value)){
              callback(new Error("IP地址格式有误"));
              return;
            }

            callback();
          }, message: "IP地址格式有误", trigger: 'blur'},
        ],
        aclThenValue: [
          { required: true, message: "值不能为空", trigger: "blur" }
        ],
        headerName: [
          { required: true, message: "名称不能为空", trigger: "blur" }
        ],
        headerValue: [
          { required: true, message: "值不能为空", trigger: "blur" }
        ],
      },
      // Inter选项信息
      serverInterOptions: [{value:1000,label:"1000"},{value:2000,label:"2000"},{value:3000,label:"3000"}],
      // Rise选项信息
      serverRiseOptions: [{value:1,label:"1"},{value:2,label:"2"},{value:3,label:"3"}],
      // Fall选项信息
      serverFallOptions: [{value:4,label:"4"},{value:5,label:"5"},{value:6,label:"6"}],
      //待选服务器
      transferSource: [],
      //已选服务器
      transferValue: [],
      transferOpen: false,
      //服务器Map
      serversMap: {},
      //代理证书Map
      proxyCrtMap: {},
      //代理证书
      proxyCrtOptions: [],
      //代理证书Map
      serverCrtMap: {},
      // uri选项信息
      uriParamTypeOptions: [{value:'whole',label:"整体"},{value:'left',label:"左部"}],
      // url参数名称选项信息
      urlParamOptions: [{value:'userid',label:"userid"},{value:'session_id',label:"session_id"}],
      // HTTP头名称选项信息
      hdrNameOptions: [{value:'Host',label:"Host"},{value:'User-Agent',label:"User-Agent"}],
      // whiteList选项信息
      whiteListOptions: [{value:0,label:"不配置"}],
      // blackList选项信息
      blackListOptions: [{value:0,label:"不配置"}],
      // http checkMethod选项信息
      checkMethodOptions: [],
      //集群信息
      cluster:{},
      // TLS版本选项信息
      sslVerOptions: [{value:'SSLv3',label:"SSLv3"},{value:'TLSv1.0',label:"TLSv1.0"},{value:'TLSv1.1',label:"TLSv1.1"},{value:'TLSv1.2',label:"TLSv1.2"},{value:'TLSv1.3',label:"TLSv1.3"}],
    };
  },
  created() {
    // const proxyId = this.$route.params && this.$route.params.id;
    
    const proxyId = this.$route.query.proxyId;
    // console.log("proxyId : " + proxyId);
    if (proxyId) {
      // 获取表详细信息,修改页面
    //   this.reset();
      getFrontproxy(proxyId).then(response => {
        this.form = response.data;
        console.log(this.form);
        
        this.form.frontProxyServerList.forEach(element => {
          this.transferValue.push(Number(element.serverId));
        });
        
        getServerCrtMap().then(response => {
          this.serverCrtMap = response.data;
          // console.log(this.serverCrtMap);
          this.displayServerCrt();
        });
      });
      
    } else {
      // 新增页面
      this.transferValue = [];
      this.reset();
    }
    
    getCluster().then(response => {
      this.cluster = response.data;
    });

    getServerMap().then(response => {
      this.serversMap = response.data;
      // console.log(this.serversMap);
      for (let key in this.serversMap) {
        this.transferSource.push({
          key: Number(key),
          label: this.serversMap[key].serverName,
          disabled: false
        });
      }
    });
    
    getProxyCrtMap().then(response => {
      this.proxyCrtMap = response.data;
      // console.log(this.proxyCrtMap);
      for (let key in this.proxyCrtMap) {
        // console.log(key);
        this.proxyCrtOptions.push({
          value: Number(key),
          label: this.proxyCrtMap[key]
        });
      }
    });
    
    getBlackwhiteListMap().then(response => {
      let blackListMap = response.data["blackList"];
      let whiteListMap = response.data["whiteList"];
      for (let key in blackListMap) {
        this.blackListOptions.push({
          value: Number(key),
          label: blackListMap[key]
        });
      }
      for (let key in whiteListMap) {
        this.whiteListOptions.push({
          value: Number(key),
          label: whiteListMap[key]
        });
      }
    });
    
    getCheckMethodMap().then(response => {
      let checkMethodMap = response.data;
      //console.log(checkMethodMap);
      for (let key in checkMethodMap) {
        // console.log(key);
        this.checkMethodOptions.push({
          value: Number(key),
          label: checkMethodMap[key]
        });
      }
    });
    

  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: null,
        proxyName: null,
        bindIp: null,
        bindPort: null,
        mode: "http",
        maxconn: 2000,
        balance: "roundrobin",
        balanceArgsDisplay:{uriParamType:"whole",uriLen:127,uriDepth:7,hdrName:"User-Agent"},
        balanceArgs: "",
        healthCheck: "tcpport",
        checkMethodId: 0,
        httpCheckConfig: null,
        sslOffloading: 0,
        proxyCrtId: null,
        frontProxyServerList:[],
        frontProxyAclList:[],
        frontProxyHeaderList:[],
        compression: 0,
        cache: 0,
        http2https: 0,
        sslMinVer: 'TLSv1.2',
        sslMaxVer: 'TLSv1.2',
        httpauth: 0,
        httpauthPath: '/',
        httpauthUsername: null,
        httpauthPasswd: null,
        showAttack: 0,
        ddos: 0,
        waf: 0,
        antibot: 0,
        whitelist: 0,
        blacklist: 0,
        forwardfor: 0,
        redispatch: 0,
        cookie: 0,
        cookieConfigDisplay:{cookieName:"srvId",nocache:0,httponly:0,secure:0,maxidle:30,maxlife:30},
        cookieConfig: "",
        status: 0,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      // this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      //console.log(this.form);
      if(this.form.frontProxyServerList.length > 0){
        this.$refs["form"].validate(valid => {
          // console.log("valid : "+valid);
          if (valid) {
            if (this.form.id != null) {
              this.form.cookieConfig = JSON.stringify(this.form.cookieConfigDisplay);
              this.form.balanceArgs = JSON.stringify(this.form.balanceArgsDisplay);
              updateFrontproxy(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                if (response.code === 200) {
                  this.close();
                }
              });
            } else {
              this.form.cookieConfig = JSON.stringify(this.form.cookieConfigDisplay);
              this.form.balanceArgs = JSON.stringify(this.form.balanceArgsDisplay);
              addFrontproxy(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                if (response.code === 200) {
                  this.close();
                }
              });
            }
          } else {
            this.$modal.msgError("数据校验失败，请详细检查");
          }
        });
      } else {
        this.$modal.msgError("后端服务器列表不能为空，请检查配置");
      }
    },
    /** 关闭按钮 */
    close() {
      // const obj = { path: "/lbconfig/frontproxy", query: { t: Date.now(), pageNum: this.$route.query.pageNum } };
      // const obj = { path: "/lbconfig/frontproxy"};
      // this.$tab.closeOpenPage(obj);
      this.$tab.closePage();
      // this.$router.push({path:'/lbconfig/frontproxy',query:{pageNum: 20}});
    },
    handleServerDelete(row) {
      console.log(row);
    },
    handleServerEdit() {
      this.transferOpen = true;
    },
    handleTransferChange(value, direction, movedKeys) {
        if(direction == "right"){
          movedKeys.forEach(element => {
            let serverItem = {
              serverId:element,
              serverName:this.serversMap[element].serverName,
              serverIp:this.serversMap[element].serverIp,
              servicePort:80,
              checkPort:80,
              weight:1,
              inter:2000,
              rise:2,
              fall:4,
              maxconn:200,
              serverCrtName:""
            };
            this.form.frontProxyServerList.push(serverItem);
          });
        } else if(direction == "left"){
          movedKeys.forEach(element => {
            let delPosition = -1;
            for(let idx = 0; idx < this.form.frontProxyServerList.length; idx++){
              let item = this.form.frontProxyServerList[idx];
              if(element == item.serverId){
                delPosition = idx;
                break;
              }
            }
            if(delPosition > -1){
              this.form.frontProxyServerList.splice(delPosition,1);
            }
            
          });
        }

        this.displayServerCrt();

    },
    displayServerCrt(){
      for(let idx = 0; idx < this.form.frontProxyServerList.length; idx++){
        let item = this.form.frontProxyServerList[idx];
        let serverCrtKey = item.serverId + ":" + item.servicePort;
        let serverCrtName = this.serverCrtMap[serverCrtKey];
        // console.log(serverCrtKey + ":" + serverCrtName);
        if(serverCrtName){
          item.serverCrtName = serverCrtName;
        }
      }
    },
    handleAclAdd() {
      // console.log("handleServerEdit");
      if(this.form.frontProxyAclList.length >=10){
        this.$modal.msgWarning("ACL列表数量最大为10");
        return;
      }
      this.form.frontProxyAclList.push({
        aclIf:"hoststart",aclIfValue:"",aclThen:"allow",aclThenValue:""
      });
    },
    handleAclDelete(idx) {
      this.form.frontProxyAclList.splice(idx,1);
    },
    alcThenChange(row) {
      if(row.aclThen == "deny" || row.aclThen == "allow"){
        row.aclThenValue = "";
      }
    },
    handleHeaderAdd() {
      // console.log("handleServerEdit");
      if(this.form.frontProxyHeaderList.length >=10){
        this.$modal.msgWarning("Header列表数量最大为10");
        return;
      }
      this.form.frontProxyHeaderList.push({
        headerAction:"httprequest",headerMethod:"addHeader",headerName:"",headerValue:""
      });
    },
    handleHeaderDelete(idx) {
      this.form.frontProxyHeaderList.splice(idx,1);
    },
    headerMethodChange(row) {
      if(row.headerMethod == "delheader"){
        row.headerValue = "";
      }
    },
    urlParamSearch(queryString,cb){
      var urlParams = [{value:"userid"},{value:"session_id"}];
      var results = queryString ? urlParams.filter(this.createFilter(queryString)) : urlParams;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (urlParam) => {
        return (urlParam.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
  },
  mounted() {
  }
};
</script>


<style lang="less">
  #serversCard {
    .el-form-item {
      margin-bottom: 0px !important;
    }
    .el-form-item__error {
      position: relative !important;
    }
    .el-input__inner {
      padding: 0 5px;
    }
    .el-card__body {
      padding: 10px 10px 10px 10px
    }
  }
  #aclsCard {
    .el-form-item {
      margin-bottom: 0px !important;
    }
    .el-form-item__error {
      position: relative !important;
    }
    .el-alert {
      padding: 5px 10px !important;
    }
  }
  #headersCard {
    .el-form-item {
      margin-bottom: 0px !important;
    }
    .el-form-item__error {
      position: relative !important;
    }
    .el-alert {
      padding: 5px 10px !important;
    }
  }
</style>
